<template>
  <div class="product-detail-view" v-loading="loading">
    <!-- start 顶部操作区 -->
    <div v-if="!dataInfo.isDelete" class="product-detail-view-title flex-x">
      <div>
        <el-button
          v-if="editCatalog"
          type="plain-third"
              v-track="getBtnsTrackData('TO_EDIT')"
          @click="alterData">
          <i class="iconfont icon-edit-square"></i>{{ $t('common.base.edit') }}
        </el-button>
        <el-button
          v-if="deleteCatalog"
          type="plain-third"
              v-track="getBtnsTrackData('DELETE')"
          @click="dleteData">
          <i class="iconfont icon-delete"></i>{{ $t('common.base.delete') }}
        </el-button>
      </div>
      <div>
        <template v-if="isHaveDetails && editCatalog">
          <el-button class="mar-l-12" type="primary" @click="onAssociated('linkProduct')" v-track="getBtnsTrackData('RELATE_PRODUCT')">
            <i class="iconfont icon-add2"></i>{{ $t('product.relateProduct') }}
          </el-button>
          <el-button v-if="!cloudwarehouse" class="mar-l-12" type="primary" @click="onAssociated('linkPart')" v-track="getBtnsTrackData('RELATE_PART')">
            <i class="iconfont icon-add2"></i>{{ $t('product.productType.btns.btn15') }}
          </el-button>
          <el-button v-if="cloudwarehouse" class="mar-l-12" type="primary" @click="handleAddMaterial('material')">
            <i class="iconfont icon-add2"></i>{{ $t('product.productType.btns.btn16') }}
          </el-button>
          <el-button class="mar-l-12" type="primary" @click="onAssociated('linkWiki')" v-track="getBtnsTrackData('RELATE_WIKI')">
            <i class="iconfont icon-add2"></i>{{ $t('product.productType.btns.btn17') }}
          </el-button>
        </template>
      </div>
    </div>
    <!-- end 顶部操作区 -->
    <!-- 通栏导航 -->
    <BaseTileLayoutTabBar
      :bar-list="bannerState.taskLayoutTabBarList"
      :now-item="bannerState.leftActiveTab"
      @changeItem="tabBarChangeItem"
      @openLayoutModal="openBaseLayoutModal"
      v-if="bannerState.taskLayout == 1"
    ></BaseTileLayoutTabBar>
    <!-- start 产品类型详情折叠面板 -->
    <base-collapse
      class="product-detail-view-content"
      :show-collapse="showCollapse"
      :direction.sync="collapseDirection"
      :hidePartCollapse="hidePartCollapse"
      v-if="isHaveDetails"
    >
      <!-- start 产品类型信息 -->
      <template slot="left">
        <div
          class="product-detail-view-content-left"
          v-show="collapseDirection != 'left'"
        >
          <!-- 左栏导航 -->
          <BaseTileLayoutTabBar
            :bar-list="bannerState.leftTabBarList"
            :now-item="bannerState.leftActiveTab"
            @openLayoutModal="openBaseLayoutModal"
            v-if="bannerState.taskLayout == 2"
          ></BaseTileLayoutTabBar>
          <div class="base-detail-layout-left-content" v-if="bannerState.leftActiveTab == 'product-view'" >
            <div class="content">
                <div class="delete-head">
                  <div class="label-delete" v-if="dataInfo.isDelete">{{ $t('common.base.deleted') }}</div>
                  <div class="main-name">
                    {{ dataInfo.catalogName }}
                  </div>
                </div>
                <div class="form-view-row" v-if="treePath.length>1">
                  <label>{{$t('common.base.productMenu')}}</label>
                  {{dataInfo.pathName}}
                </div>
                <product-menu-view
                  :fields="fields"
                  :prop-data="dataInfo"
                  :form-cell-count="formCellCount"
                ></product-menu-view>
            </div>
          </div>
        </div>

        <div class="collapse-btn" v-show="collapseDirection == 'left'">
          {{ $t('product.productType.text.text3') }}
        </div>
      </template>
      <!-- end 产品类型信息 -->

      <template slot="rightExtend">
        <div class="collapse-btn" @click="rightActiveTab = 'record'">
          {{ $t('common.base.dynamicInfo') }}
        </div>
      </template>

      <!-- start 附加组件 -->
      <template slot="right">
        <div
          class="product-detail-view-content-right product-menu-content-right"
          v-show="collapseDirection != 'right'"
        >
          <BaseBarV3
            :bar-list="bannerState.rightTabBarList"
            :now-item="bannerState.rightActiveTab"
            @changeItem="tabBarChangeItem"
            @upDateBarList="tabBarUpdateList"
            v-if="bannerState.taskLayout == 2"
          />
          <div class="right-content-box">
            <product-menu-info-record
              ref="producMmenuInfoRecord"
              :prop-data="dataInfo"
              v-show="bannerState.rightActiveTab == 'record'"
            />  
            <mini-table
              ref="linkProduct"
              :id="dataInfo.id"
              data-type="product"
              page-type="view"
              @reload="reloadRecord"
              v-show="bannerState.rightActiveTab == 'product'"
            />
            <mini-table
              :id="dataInfo.id"
              ref="linkPart"
              data-type="part"
              page-type="view"
              @reload="reloadRecord"
              v-show="bannerState.rightActiveTab == 'part'"
            />
            <form-materials-bill-view
              ref="materialBillRef" 
              :field='materialBillFields' 
              :catalogId="catalogId"
              @handleDelete="handleDeleteMaterial"
              v-show="bannerState.rightActiveTab == 'material'"
            >
            </form-materials-bill-view>
            <mini-table
              :id="dataInfo.id"
              ref="linkWiki"
              data-type="wiki"
              page-type="view"
              @reload="reloadRecord"
              v-show="bannerState.rightActiveTab == 'wiki'"
            />
            <tree-list 
              v-loading="faultLoading"
              ref="treeListRef"
              :fault-list="faultList"
              v-show="bannerState.rightActiveTab == 'productFaultLibrary'"
              />
          </div>

          <el-tabs v-model="rightActiveTab" @tab-click="rightActiveTabClick" v-if="false">
            <el-tab-pane :label="`${rightSystemTabs['record'].title}(${statistics.recordCount || 0})` " name="record">
              <product-menu-info-record
                ref="producMmenuInfoRecord"
                :prop-data="dataInfo"
            /> </el-tab-pane>
            <el-tab-pane :label="`${rightSystemTabs['product'].title}(${statistics.productCount || 0})`" name="product">
              <mini-table
                ref="linkProduct"
                :id="dataInfo.id"
                data-type="product"
                page-type="view"
                @reload="reloadRecord"
              />
            </el-tab-pane>
            <!-- 备件和物料清单不可同时存在， 若开启服务云仓后【产品备件】不再显示，考虑该控件的开启与禁用同云仓灰度 -->
            <el-tab-pane :label="`${rightSystemTabs['part'].title}(${statistics.partCount || 0 })`" name="part" v-if="!cloudwarehouse">
              <mini-table
                :id="dataInfo.id"
                ref="linkPart"
                data-type="part"
                page-type="view"
                @reload="reloadRecord"
              />
            </el-tab-pane>
            <el-tab-pane :label="`${rightSystemTabs['materiel'].title}(${quantityStatistics.materielCount || 0 })`" name="material" v-if="cloudwarehouse">
              <form-materials-bill-view
                ref="materialBillRef" 
                :field='materialBillFields' 
                :catalogId="catalogId"
                @handleDelete="handleDeleteMaterial"
              >
              </form-materials-bill-view>
            </el-tab-pane>
            <el-tab-pane :label="`${rightSystemTabs['wiki'].title}(${statistics.wikiCount || 0 })`" name="wiki">
              <mini-table
                :id="dataInfo.id"
                ref="linkWiki"
                data-type="wiki"
                page-type="view"
                @reload="reloadRecord"
              />
            </el-tab-pane>
            <!-- 产品故障库 -->
            <el-tab-pane :label="`${rightSystemTabs['productFaultLibrary'].title}`" name="productFaultLibrary" v-if="isShowFaultLibrary">
              <tree-list 
                v-loading="faultLoading"
                ref="treeListRef"
                :fault-list="faultList"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <!-- end 附加组件 -->
    </base-collapse>
    <!-- end 产品类型详情折叠面板 -->

    <div class="no_data_view" v-else>
      <no-data-view :notice-msg="$t('product.productType.tips.tip29')"></no-data-view>
      <div class="text-center mar-t-24">
        <el-button 
          id="product-catalog-set-1"
          type="primary"
          v-if="!dataInfo.isDelete && editCatalog"
          @click="alterData"
        >{{$t('product.productType.btns.btn18')}}</el-button>
      </div>
    </div>

    <!--start 关联备件清单和关联知识库  -->
    <public-dialog 
      ref="publicDialog"
      :visible-prop="visibleProp"
      @changeVisibleProp="changeVisibleProp"
      @confirm="dialogConfirm"
      :dialog-type="dialogType"
      :showAddress='showAddress'
      :showLinkman='showLinkman'
    ></public-dialog>

    <!-- 关联物料弹框 -->
    <material-dialog
      ref="materialDialogRef"
      :columns="masterialColumns"
      @handleSubmit="handleSubmitMaterial"
      :catalogId="catalogId"
    ></material-dialog>
    <!-- 通栏设置 -->
    <biz-layout-modal
      ref="bizLayoutModal"
      :columns="formCellCount"
      :biz-layout-type="bannerState.taskLayout"
      @changeLayout="changeTaskDetailLayout">
    </biz-layout-modal>
  </div>
</template>

<script>
import ProductDetailView from './ProductDetailView';
export default ProductDetailView;
</script>

<style lang="scss" scoped>
@import './common-product.scss';
.base-detail-layout-left-content {
  height: 100%;
}
.product-menu-content-right {
  display: flex;
  flex-direction: column;
  .right-content-box {
    padding: 16px;
    overflow: auto;
  }
}

</style>